<!--
This is the daverin.com menu. It is a floating multi-tier menu that has no
imposed order. That is to say, the menu entries for each level just float
around on the screen. When one is clicked, it either goes to its target or
it populates the floating area with submenu items. The higher levels are
always present, and continue to float around, but are grayed out to increasing
levels.

The current menu entries are:

  daverin (family/website focused things)
    wiki
    blog
  personal (stuff just for me)
    music
      arms of mary
      jesu, joy of man's desiring
      echo pedal 1
    movie blog
    projects
      dopewars
      dopewars 2.0
      musical balls
      krypto
      kanji flashcards
      website
    collections
      music
      movies
      comics
  professional (resume and portfolio)
    resume (html)
    resume (pdf)
    resume (doc)
    portfolio
  other
    leslie's burger cake
    leslie's sketch cake
-->
<html>
<head>
<style type="text/css">
.initial_entry {
  position: absolute;
  top: 1;
  left: 1;
  padding: 5px;
  cursor: pointer;
  visibility: hidden;
}
</style>
<title>daverin.com</title>
<script type="text/javascript">

// This is the major function that moves things around, and responds to hitting
// the edge of the screen by bouncing back in the opposite direction. It
// requires that the standard movement variables be defined in the global
// "big_motion_object" based on the element id that is passed in, with the
// suffixes "_velocity", "_angle", "_x_accumulator", "_y_accumulator",
// "_size_velocity", and "_size_accumulator".
function wiggleAround(docElementId, nextTime) {

  // Make sure the element exists AND is visible
  var element = document.getElementById(docElementId);
  if (!element) { return; }
  if (!element.style.visible == "visible") { return; }

  // Handle motion in the x axis, checking for bounces against either side of
  // the screen. If the element hits the edge or is off the edge, only allow
  // motion in the direction of the visible screen.
  var x_velocity = big_motion_object[docElementId + "_velocity"] *
                   Math.cos(big_motion_object[docElementId + "_angle"]);
  var x_accumulator = big_motion_object[docElementId + "_x_accumulator"] +
                      x_velocity;
  var x_motion = 0;
  if ((x_accumulator >= 1) || (x_accumulator <= -1)) {
    x_motion = Math.floor(x_accumulator);
    x_accumulator = x_accumulator - x_motion;
    if (parseInt(element.style.left) >= (document.body.clientWidth -
                                         element.clientWidth - 8)) {
      x_velocity=-(Math.abs(x_velocity));
      x_accumulator=-(Math.abs(x_accumulator));
      element.style.left = (parseInt(element.style.left) -
                            Math.abs(x_motion)) + 'px';
    } else if (parseInt(element.style.left) <= 0) {
      x_velocity = Math.abs(x_velocity);
      x_accumulator = Math.abs(x_accumulator);
      element.style.left = (parseInt(element.style.left) +
                            Math.abs(x_motion)) + 'px'
    } else {
      element.style.left = (parseInt(element.style.left) + x_motion) + 'px';
    }
  }

  // Handle motion in the y axis identically to motion in the x axis.
  var y_velocity = big_motion_object[docElementId + "_velocity"] *
                   Math.sin(big_motion_object[docElementId + "_angle"]);
  var y_accumulator = big_motion_object[docElementId + "_y_accumulator"] +
                      y_velocity;
  var y_motion = 0;
  if ((y_accumulator >= 1) || (y_accumulator <= -1)) {
    y_motion = Math.floor(y_accumulator);
    y_accumulator = y_accumulator - y_motion;
    if (parseInt(element.style.top) >= (document.body.clientHeight -
                                        element.clientHeight - 8)) {
      y_velocity=-(Math.abs(y_velocity));
	  y_accumulator=-(Math.abs(y_accumulator));
      element.style.top = (parseInt(element.style.top) -
                           Math.abs(y_motion)) + 'px';
    } else if (parseInt(element.style.top) <= 0) {
      y_velocity=Math.abs(y_velocity);
	  y_accumulator=Math.abs(y_accumulator);
      element.style.top = (parseInt(element.style.top) +
                           Math.abs(y_motion)) + 'px';
    } else {
	  element.style.top = (parseInt(element.style.top) + y_motion) + 'px';
    }
  }

  // Handle motion in the size axis identically to motion in either the x
  // or y axes, with the exception that the maximum and minimum sizes are
  // determined as a fraction of the available area instead of the edges.
  var size_velocity = big_motion_object[docElementId + "_size_velocity"];
  var size_accumulator = big_motion_object[
      docElementId + "_size_accumulator"] + size_velocity;
  var size_motion = 0;
  var max_font_size = (document.body.clientHeight +
                       document.body.clientWidth) / 30.0;
  var min_font_size = (document.body.clientHeight +
                       document.body.clientWidth) / 60.0;
  if ((size_accumulator >= 1) || (size_accumulator <= -1)) {
    size_motion = Math.floor(size_accumulator);
    size_accumulator = size_accumulator - size_motion;
    if (parseInt(element.style.fontSize) >= max_font_size) {
      size_velocity = -(Math.abs(size_velocity));
      size_accumulator = -(Math.abs(size_velocity));
      element.style.fontSize = (parseInt(element.style.fontSize) -
                                Math.abs(size_motion)) + 'px';
    } else if (parseInt(element.style.fontSize) <= min_font_size) {
      size_velocity = Math.abs(size_velocity);
      size_accumulator = Math.abs(size_velocity);
      element.style.fontSize = (parseInt(element.style.fontSize) +
                                Math.abs(size_motion)) + 'px';
    } else {
      element.style.fontSize = (parseInt(element.style.fontSize) +
                                size_motion) + 'px';
    }
  }

  // Tweak the existing motion. Tweak the size and direction velocities
  // independently.
  var new_angle = Math.atan2(y_velocity, x_velocity);
  var angle_tweak = Math.random() / 5.0 - 1 / 10.0;
  new_angle = new_angle + angle_tweak;
  var velocity_tweak = Math.random() - 0.5;
  new_velocity = big_motion_object[docElementId + "_velocity"] +
                 velocity_tweak;
  var size_tweak = Math.random() / 10.0 - 1 / 20.0;
  new_size_velocity = big_motion_object[docElementId + "_size_velocity"] +
                      size_tweak;
  if (new_velocity > 7.0) {
    new_velocity = 7.0;
  }
  if (new_velocity < 0.0) {
    new_velocity = 0.0;
  }
  if (new_size_velocity > 0.2) {
    new_size_velocity = 0.2;
  }
  if (new_size_velocity < -0.2) {
    new_size_velocity = -0.2;
  }

  // Set all the positions and velocities according to the moved and
  // tweaked values.
  big_motion_object[docElementId + "_x_accumulator"] = x_accumulator;
  big_motion_object[docElementId + "_y_accumulator"] = y_accumulator;
  big_motion_object[docElementId + "_size_accumulator"] = size_accumulator;
  big_motion_object[docElementId + "_angle"] = new_angle;
  big_motion_object[docElementId + "_velocity"] = new_velocity;
  big_motion_object[docElementId + "_size_velocity"] = new_size_velocity;

  // Setup the next iteration to happen.
  var t = setTimeout("wiggleAround('" + docElementId + "', " +
                                   nextTime + ");",
                     nextTime);
}


function unfade_element(element) {
  if (menu_map[element.id].substring(0, 5) == "menu_") {
    element.style.backgroundColor = MENU_BG_COLOR;
    element.style.color = MENU_COLOR;
    element.style.border = MENU_BORDER;
  } else {
    element.style.backgroundColor = ENDPOINT_BG_COLOR;
    element.style.color = ENDPOINT_COLOR;
    element.style.border = ENDPOINT_BORDER;
  }
}

function fade_element(element) {
  element.style.backgroundColor = '#eee';
  element.style.color = '#bbb';
  element.style.border = 'solid 1px #bbb';
}

function hide_menu(menu_name) {
  var elements = document.getElementsByName(menu_name);
  for (var i = 0; i < elements.length; ++i) {
    elements[i].style.visibility = "hidden";
  }
}

function fade_menu(menu_name) {
  var elements = document.getElementsByName(menu_name);
  for (var i = 0; i < elements.length; ++i) {
    fade_element(elements[i]);
    elements[i].onclick = function() { hide_menus_below(menu_name); initialize_menu(menu_name); }
  }
}

function hide_menus_below(menu_name) {
  var hide_menus = hide_menu_map[menu_name];
  for (var i = 0; i < hide_menus.length; ++i) {
    hide_menu(hide_menus[i]);
  }
}

function fade_menus_above(menu_name) {
  var fade_menus = fade_menu_map[menu_name];
  for (var i = 0; i < fade_menus.length; ++i) {
    fade_menu(fade_menus[i]);
  }
}

function initialize_menu(menu_name) {
  var elements = document.getElementsByName(menu_name);
  for (var i = 0; i < elements.length; ++i) {
    if (!elements[i].style.visibility || (elements[i].style.visibility == "hidden")) {
      randomly_place(elements[i]);
    }
    unfade_element(elements[i]);
    if (menu_map[elements[i].id].substring(0, 5) == "menu_") {
      elements[i].onclick = new Function("fade_menus_above('" + menu_name + "'); initialize_menu('" + menu_map[elements[i].id] + "');");
    } else {
      elements[i].onclick = new Function("window.location='" + menu_map[elements[i].id] + "';");
    }
    start_jigglin(elements[i].id);
  }
}

function randomly_place(element) {
  element.style.fontSize = Math.floor((document.body.clientHeight +
                              document.body.clientWidth) /
                            (30.0 + Math.random() * 30.0)) + 'px';
  element.style.left = (Math.random() * (document.body.clientWidth -
                        element.clientWidth - 8)) + 'px';
  element.style.top = (Math.random() * (document.body.clientHeight -
                       element.clientHeight - 8)) + 'px';
  element.style.visibility="visible";
}

function start_jigglin(element_id) {
  big_motion_object[element_id + "_x_accumulator"] = 0;
  big_motion_object[element_id + "_y_accumulator"] = 0;
  big_motion_object[element_id + "_size_accumulator"] = 0;
  big_motion_object[element_id + "_angle"] = 15 * Math.PI / 8;
  big_motion_object[element_id + "_velocity"] = 1;
  big_motion_object[element_id + "_size_velocity"] = 0;
  var t = setTimeout("wiggleAround('" + element_id + "', 50);", 50);
}

</script>
</head>
<body id="top_level">
<table id="center_icon" style="position: absolute: top: 0; left: 0; width: 100%; height: 100%;">
  <tr>
    <td valign=center align=center><img src="dav_center.png" /></td>
  </tr>
</table>

<script>
var menu_map = new Array();
var fade_menu_map = new Array();
fade_menu_map["menu_top"] = ["menu_top",];
var hide_menu_map = new Array();
hide_menu_map["menu_top"] = new Array();
</script>

<div name="menu_top" id="menu_top_daverin_com" class="initial_entry">daverin</div>
<script>
menu_map["menu_top_daverin_com"] = "menu_daverin_com";
fade_menu_map["menu_top_daverin_com"] = ["menu_daverin_com", "menu_top"];
hide_menu_map["menu_top"].push("menu_daverin_com");
hide_menu_map["menu_daverin_com"] = new Array();
</script>

<div name="menu_daverin_com" id="menu_daverin_com_blog" class="initial_entry">blog</div>
<script>menu_map["menu_daverin_com_blog"] = "http://www.daverin.com/daverinwiki/index.php";</script>
<div name="menu_daverin_com" id="menu_daverin_com_wiki" class="initial_entry">wiki</div>
<script>menu_map["menu_daverin_com_wiki"] = "http://daverin.blogspot.com/";</script>

<div name="menu_top" id="menu_personal" class="initial_entry">personal</div>
<script>
menu_map["menu_personal"] = "menu_personal";
fade_menu_map["menu_personal"] = ["menu_personal", "menu_top"];
hide_menu_map["menu_top"].push("menu_personal");
hide_menu_map["menu_personal"] = new Array();
</script>

<div name="menu_personal" id="menu_personal_music" class="initial_entry">music</div>
<script>
menu_map["menu_personal_music"] = "menu_personal_music";
fade_menu_map["menu_personal_music"] = ["menu_personal_music", "menu_personal", "menu_top"];
hide_menu_map["menu_top"].push("menu_personal_music");
hide_menu_map["menu_personal"].push("menu_personal_music");
hide_menu_map["menu_personal_music"] = new Array();
</script>

<div name="menu_personal_music" id="menu_personal_music_arms_of_mary" class="initial_entry">arms&nbsp;of&nbsp;mary</div>
<script>menu_map["menu_personal_music_arms_of_mary"] = "http://www.daverin.com/music/ArmsOfMary.mp3";</script>
<div name="menu_personal_music" id="menu_personal_music_jesu_joy" class="initial_entry">jesu,&nbsp;joy&nbsp;of&nbsp;man's&nbsp;desiring</div>
<script>menu_map["menu_personal_music_jesu_joy"] = "http://www.daverin.com/music/JesuJoyOfMansDesiring.mp3";</script>
<div name="menu_personal_music" id="menu_personal_music_o_tannenbaum" class="initial_entry">o&nbsp;tannenbaum</div>
<script>menu_map["menu_personal_music_o_tannenbaum"] = "http://www.daverin.com/music/OTannenbaum.mp3";</script>
<div name="menu_personal_music" id="menu_personal_music_little_town" class="initial_entry">little&nbsp;town&nbsp;of&nbsp;bethlehem</div>
<script>menu_map["menu_personal_music_little_town"] = "http://www.daverin.com/music/OLittleTownOfBethlehem.mp3";</script>
<div name="menu_personal_music" id="menu_personal_music_little_drummer" class="initial_entry">little&nbsp;drummer&nbsp;boy</div>
<script>menu_map["menu_personal_music_little_drummer"] = "http://www.daverin.com/music/LittleDrummerBoy.mp3";</script>
<div name="menu_personal_music" id="menu_personal_music_echo_1" class="initial_entry">echo&nbsp;pedal&nbsp;1</div>
<script>menu_map["menu_personal_music_echo_1"] = "http://www.daverin.com/music/EchoPedal1.mp3";</script>
<div name="menu_personal_music" id="menu_personal_music_echo_2" class="initial_entry">echo&nbsp;pedal&nbsp;2</div>
<script>menu_map["menu_personal_music_echo_2"] = "http://www.daverin.com/music/EchoPedal2.mp3";</script>
<div name="menu_personal_music" id="menu_personal_music_echo_3" class="initial_entry">echo&nbsp;pedal&nbsp;3</div>
<script>menu_map["menu_personal_music_echo_3"] = "http://www.daverin.com/music/EchoPedal3.mp3";</script>
<div name="menu_personal_music" id="menu_personal_music_echo_4" class="initial_entry">echo&nbsp;pedal&nbsp;4</div>
<script>menu_map["menu_personal_music_echo_4"] = "http://www.daverin.com/music/EchoPedal4.mp3";</script>
<div name="menu_personal_music" id="menu_personal_music_loop_1" class="initial_entry">loop&nbsp;1</div>
<script>menu_map["menu_personal_music_loop_1"] = "http://www.daverin.com/music/Loop1.mp3";</script>
<div name="menu_personal_music" id="menu_personal_music_loop_2" class="initial_entry">loop&nbsp;2</div>
<script>menu_map["menu_personal_music_loop_2"] = "http://www.daverin.com/music/Loop2.mp3";</script>
<div name="menu_personal_music" id="menu_personal_music_loop_3" class="initial_entry">loop&nbsp;3</div>
<script>menu_map["menu_personal_music_loop_3"] = "http://www.daverin.com/music/Loop3.mp3";</script>
<div name="menu_personal_music" id="menu_personal_music_loop_4" class="initial_entry">loop&nbsp;4</div>
<script>menu_map["menu_personal_music_loop_4"] = "http://www.daverin.com/music/Loop4.mp3";</script>
<div name="menu_personal_music" id="menu_personal_music_loop_5" class="initial_entry">loop&nbsp;5</div>
<script>menu_map["menu_personal_music_loop_5"] = "http://www.daverin.com/music/Loop5.mp3";</script>
<div name="menu_personal_music" id="menu_personal_music_loop_6" class="initial_entry">loop&nbsp;6</div>
<script>menu_map["menu_personal_music_loop_6"] = "http://www.daverin.com/music/Loop6.mp3";</script>
<div name="menu_personal_music" id="menu_personal_music_loop_7" class="initial_entry">loop&nbsp;7</div>
<script>menu_map["menu_personal_music_loop_7"] = "http://www.daverin.com/music/Loop7.mp3";</script>
<div name="menu_personal_music" id="menu_personal_music_loop_8" class="initial_entry">loop&nbsp;8</div>
<script>menu_map["menu_personal_music_loop_8"] = "http://www.daverin.com/music/Loop8.mp3";</script>
<div name="menu_personal_music" id="menu_personal_music_loop_9" class="initial_entry">loop&nbsp;9</div>
<script>menu_map["menu_personal_music_loop_9"] = "http://www.daverin.com/music/Loop9.mp3";</script>

<div name="menu_personal" id="menu_personal_movie_blog" class="initial_entry">movie&nbsp;blog</div>
<script>menu_map["menu_personal_movie_blog"] = "http://www.daverin.com/wordpress/";</script>

<div name="menu_personal" id="menu_personal_projects" class="initial_entry">projects</div>
<script>
menu_map["menu_personal_projects"] = "menu_personal_projects";
fade_menu_map["menu_personal_projects"] = ["menu_personal_projects", "menu_personal", "menu_top"];
hide_menu_map["menu_top"].push("menu_personal_projects");
hide_menu_map["menu_personal"].push("menu_personal_projects");
hide_menu_map["menu_personal_projects"] = new Array();
</script>

<div name="menu_personal_projects" id="menu_personal_projects_dopewars" class="initial_entry">dopewars</div>
<script>menu_map["menu_personal_projects_dopewars"] = "http://sites.google.com/site/dopewarsandroid/Home";</script>
<div name="menu_personal_projects" id="menu_personal_projects_dopewars_2" class="initial_entry">dopewars&nbsp;2.0</div>
<script>menu_map["menu_personal_projects_dopewars_2"] = "http://code.google.com/p/dopewars-android/";</script>
<div name="menu_personal_projects" id="menu_personal_projects_musical_balls" class="initial_entry">musical&nbsp;balls</div>
<script>menu_map["menu_personal_projects_musical_balls"] = "http://www.daverin.com/windchimes/index.html";</script>
<div name="menu_personal_projects" id="menu_personal_projects_krypto" class="initial_entry">krypto</div>
<script>menu_map["menu_personal_projects_krypto"] = "http://code.google.com/p/krypto-android/";</script>
<div name="menu_personal_projects" id="menu_personal_projects_kanji_flash" class="initial_entry">kanji&nbsp;flashcards</div>
<script>menu_map["menu_personal_projects_kanji_flash"] = "http://www.cyrket.com/package/com.daverin.KanjiFlashcards";</script>
<div name="menu_personal_projects" id="menu_personal_projects_website" class="initial_entry">website</div>
<script>menu_map["menu_personal_projects_website"] = "http://code.google.com/p/joes-bouncy-menu/";</script>

<div name="menu_personal" id="menu_personal_collections" class="initial_entry">collections</div>
<script>
menu_map["menu_personal_collections"] = "menu_personal_collections";
fade_menu_map["menu_personal_collections"] = ["menu_personal_collections", "menu_personal", "menu_top"];
hide_menu_map["menu_top"].push("menu_personal_collections");
hide_menu_map["menu_personal"].push("menu_personal_collections");
hide_menu_map["menu_personal_collections"] = new Array();
</script>

<div name="menu_personal_collections" id="menu_personal_collections_music" class="initial_entry">music</div>
<script>menu_map["menu_personal_collections_music"] = "http://www.doestwork.com/";</script>
<div name="menu_personal_collections" id="menu_personal_collections_movies" class="initial_entry">movies</div>
<script>menu_map["menu_personal_collections_movies"] = "http://www.doestwork.com/";</script>
<div name="menu_personal_collections" id="menu_personal_collections_comics" class="initial_entry">comics</div>
<script>menu_map["menu_personal_collections_comics"] = "http://www.doestwork.com/";</script>

<div name="menu_top" id="menu_professional" class="initial_entry">professional</div>
<script>
menu_map["menu_professional"] = "menu_professional";
fade_menu_map["menu_professional"] = ["menu_professional", "menu_top"];
hide_menu_map["menu_top"].push("menu_professional");
hide_menu_map["menu_professional"] = new Array();
</script>

<div name="menu_professional" id="menu_professional_resume_html" class="initial_entry">resume&nbsp;(html)</div>
<script>menu_map["menu_professional_resume_html"] = "http://www.daverin.com/resume/index.html";</script>
<div name="menu_professional" id="menu_professional_resume_pdf" class="initial_entry">resume&nbsp;(pdf)</div>
<script>menu_map["menu_professional_resume_pdf"] = "http://www.doesntwork.com";</script>
<div name="menu_professional" id="menu_professional_resume_doc" class="initial_entry">resume&nbsp;(doc)</div>
<script>menu_map["menu_professional_resume_doc"] = "http://www.daverin.com/resume/1PageResume.Joe.20070508.doc";</script>
<div name="menu_professional" id="menu_professional_2_page_resume_doc" class="initial_entry">2-page&nbsp;resume&nbsp;(doc)</div>
<script>menu_map["menu_professional_2_page_resume_doc"] = "http://www.daverin.com/resume/2PageResume.Joe.20070508.doc";</script>
<div name="menu_professional" id="menu_professional_portfolio" class="initial_entry">portfolio</div>
<script>menu_map["menu_professional_portfolio"] = "http://www.daverin.com/portfolio/index.html";</script>

<div name="menu_top" id="menu_other" class="initial_entry">other</div>
<script>
menu_map["menu_other"] = "menu_other";
fade_menu_map["menu_other"] = ["menu_other", "menu_top"];
hide_menu_map["menu_top"].push("menu_other");
hide_menu_map["menu_other"] = new Array();
</script>

<div name="menu_other" id="menu_other_leslie_burger_cake" class="initial_entry">leslie's&nbsp;burger&nbsp;cake</div>
<script>menu_map["menu_other_leslie_burger_cake"] = "http://threadcakes.com/entries/view/159";</script>
<div name="menu_other" id="menu_other_leslie_sketch_cake" class="initial_entry">leslie's&nbsp;sketch&nbsp;cake</div>
<script>menu_map["menu_other_leslie_sketch_cake"] = "http://threadcakes.com/entries/view/260";</script>

<script>

// Set constants for color and niceness, this could (should) probably be css.
MENU_BG_COLOR = '#ffe4a2';
MENU_COLOR = '#008400';
MENU_BORDER = 'solid 2px #00dc00';
ENDPOINT_BG_COLOR = '#a2e4ff';
ENDPOINT_COLOR = '#000084';
ENDPOINT_BORDER = 'solid 2px #0000dc';

var big_motion_object = new Object();
// When starting up, position things randomly
initialize_menu("menu_top");

</script>
</body>